<template>
  <div>
    <el-timeline>
      <el-timeline-item timestamp="本店铺的链接" placement="top">
        <el-card>
          <el-form :inline="true" :model="formInlineThree" class="demo-form-inline">
            <el-form-item
              label="文件类型："
              prop="field"
              class="el-col-7"
            >
              <el-select v-model="formInlineThree.field" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="额外字段：" class="el-col-8">
              <el-input v-model="formInlineThree.tbAccount" placeholder="注意不超过15个汉字" clearable/>
            </el-form-item>
            <el-form-item label="上传文件：" class="el-col-5">
              <el-upload
                class="upload"
                ref="upload"
                action="string"
                :file-list="fileListThree"
                :on-change="handleChangeThree"
                :auto-upload="false"
                :limit="8"
                multiple="multiple"
              >
                <el-button
                  slot="trigger"
                  size="small"
                  type="primary"
                  @click="delFileThree"
                >选取文件
                </el-button>
              </el-upload>
            </el-form-item>
            <el-form-item class="el-col-2">
              <el-button size="small" type="primary" @click="getSkuResult">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-timeline-item>
    </el-timeline>

  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      userForm: {
        tbLink: '',
        priceLink: '',
        name: ''
      },
      stepTwoTitle: '响应信息',
      isStepTwoDisplay: false,
      stepTwoInfo: '',
      editInfo: false,
      total: 0,
      fileList: [],
      fileListTwo: [],
      fileListThree: [],
      formInlineThree: {
        formData: '',
        tbAccount: '',
        field: ''
      },
      displayNoSkuGoodsId: false,
      formLabelWidth: '20px',
      goodsIds: '',
      options: [{
        value: 'ADD_SALE',
        label: '销售属性备注'
      }, {
        value: 'ADD_SKU',
        label: '新增SKU'
      }, {
        value: 'PRICE_INVENTORY',
        label: '更新SKU的价格库存'
      }, {
        value: 'WECHAT_PHONE',
        label: '获取微信好友信息'
      }]
    }
  },
  created() {
  },
  methods: {
    getSkuResult() {
      // eslint-disable-next-line no-unused-vars
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // eslint-disable-next-line no-unused-vars
      const hasToken = getToken()
      const formData = new FormData()
      // formData.append('file', this.fileListThree)
      for (var i = 0; i < this.fileListThree.length; i++) {
        formData.append('file', this.fileListThree[i].raw)
      }
      formData.append('tbAccount', this.formInlineThree.tbAccount)
      formData.append('field', this.formInlineThree.field)
      if (this.fileListThree.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/tb/skuResult', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8',
          'X-Token': hasToken
        }
      }).then(res => {
        loading.close()
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.message
        // eslint-disable-next-line no-new-object
        console.log(aaa)
        if (res.data.code === 20000) {
          console.log(res.data.data)
          // 发起下载的请求
          this.download(res.data.data)
          if (aaa === '成功') {
            // 展示失败的goodsId 没有SKU_ID
            this.$message({
              message: '成功：' + aaa,
              type: 'success'
            })
          } else {
            this.displayNoSkuGoodsId = true
            this.goodsIds = aaa
          }
        } else {
          // this.dialogFormVisible = true
          // this.againLinks = aaa
          this.$message({
            message: '错误信息：' + aaa,
            type: 'warning'
          })
        }
      })
    },

    // 点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = []
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 点击文件
    handlePreview(file) {
      console.log(file)
    },
    // 第二步骤的文件
    delFileTwo() {
      this.fileListTwo = []
    },
    handleChangeTwo(file, fileList) {
      this.fileListTwo = fileList
    },
    // 第三步骤的文件
    delFileThree() {
      this.fileListThree = []
    },
    handleChangeThree(file, fileList) {
      this.fileListThree = fileList
    },
    openEditUI(id) {
      if (id == null) {
        this.title = '新增链接'
      }
      this.editInfo = true
      this.userForm.name = this.name
    },
    download(filePath) {
      this.downloadA('http://101.201.64.236:9999/prod-api/tb/download?filePath=' + filePath)
    },
    exportDocument(filePath) {
      this.downloadA('http://101.201.64.236:9999/prod-api/tb/exportDocument?filePath=' + filePath)
    },
    exportDocumentOne() {
      const filepath = '/data/file/同行链接模版.xlsx'
      // const filepath = '/Users/mac/Documents/work/BI-Back/src/main/resources/dataTest.xlsx'
      this.exportDocument(filepath)
    },
    exportDocumentTwo() {
      const filePath = '/data/file/店铺商品信息模版.xlsx'
      this.exportDocument(filePath)
    },
    downloadA(url) {
      const a = document.createElement('a')
      a.href = url
      a.hidden = true
      // a.target = "_blank";
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value1: '',
        value2: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style>
el-input {
  width: 100px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}

.blue-link {
  color: blue;
}

</style>
